<template>
    <BasePage>
        <el-form slot="form" :inline="true" size="medium" @submit.native.prevent>
            <el-form-item label="公路名称">
                <RoadSelect :value.sync="form.roadCode" clearable />
            </el-form-item>
            <el-form-item label="项目名称">
                <el-input v-model.trim="form.projectName" clearable placeholder="请输入" />
            </el-form-item>
            <el-form-item label="更新日期">
                <el-date-picker v-model="form.updateTime" type="date" value-format="yyyy-MM-dd" :editable="false" placeholder="请选择" />
            </el-form-item>
            <el-form-item label="归属计划周期">
                <el-date-picker v-model="form.planCycle" type="month" value-format="yyyy-M" :editable="false" placeholder="请选择" style="width: 100%" />
            </el-form-item>
            <el-form-item>
                <BaseButton v-permission="{ btnCode: 'dlyh_c18_d95_2' }" @click="handleFilter">查询</BaseButton>
                <BaseButton type="second" @click="resetConditions">重置</BaseButton>
            </el-form-item>
        </el-form>

        <!--数据列表区-->
        <BaseTable slot="table" v-loading="listLoading" :columns="columns" :data="list" row-key="id" height="calc(100% - 73px)" highlight-current-row>
            <template #progress="{ scope: { row } }">
                <span>{{ row.progress }}%</span>
            </template>
            <template #completedAmount="{ scope: { row } }">
                <span>{{ row.completedAmount }}{{ row.arithmeticalUnit }}</span>
            </template>
            <template #status="{ scope: { row } }">
                <span :style="`color:${statusColor[row.status]};`">{{ row.statusStr }}</span>
            </template>
            <template #money="{ scope: { row } }">
                <span>{{ row.money }}元</span>
            </template>
        </BaseTable>
        <!--分页组件-->
        <Pagination
            slot="pagination"
            :current-page.sync="page.pageNo"
            :page-size.sync="page.pageSize"
            :total="page.total"
            @current-change="getList"
            @size-change="getList"
        />
    </BasePage>
</template>

<script>
import BasePage from '@/layouts/BasePage'
import { PlanImpleModel } from '@/models'
import { value2Name } from '@/filters'
import KeepAliveHandler from '@/mixins/keepAliveHandler'

export default {
    name: 'PlanMaintenanceIndex',
    components: {
        BasePage
    },
    filters: {
        value2Name
    },
    mixins: [
        KeepAliveHandler({
            defaultCondition: {
                roadCode: null,
                projectName: null,
                updateTime: null,
                planCycle: null
            },
            conditionObjKey: 'form'
        })
    ],
    data() {
        return {
            statusColor: Object.freeze({
                1: '#eaac3f',
                2: 'currentColor'
            }),
            model: new PlanImpleModel(),
            form: {
                roadCode: null,
                projectName: null,
                updateTime: null,
                planCycle: null
            },
            listLoading: true,
            list: [],
            page: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            columns: Object.freeze([
                {
                    attrs: {
                        prop: 'highwayName',
                        label: '公路名称',
                        width: '140',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'directionStr',
                        label: '方向',
                        width: '80'
                    }
                },
                {
                    attrs: {
                        prop: 'location',
                        label: '养护位置',
                        'min-width': '160',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'projectName',
                        label: '项目名称',
                        width: '120',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'projectType',
                        label: '工程类型',
                        'min-width': '160',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'planCycle',
                        label: '归属计划周期',
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'alignProject',
                        label: '对齐项目',
                        'show-overflow-tooltip': true,
                        width: '140'
                    }
                },
                {
                    slot: 'progress',
                    attrs: {
                        label: '完成进度',
                        width: '100'
                    }
                },
                {
                    slot: 'status',
                    attrs: {
                        label: '状态',
                        width: '100'
                    }
                },
                {
                    attrs: {
                        prop: 'updateTime',
                        label: '更新日期',
                        width: '160'
                    }
                },
                {
                    attrs: {
                        prop: 'implementation',
                        label: '实施情况',
                        'min-width': '160',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    slot: 'completedAmount',
                    attrs: {
                        label: '已完成工程量',
                        width: '120',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    slot: 'money',
                    attrs: {
                        label: '金额',
                        width: '120',
                        'show-overflow-tooltip': true
                    }
                }
            ])
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            this.listLoading = true
            this.model
                .getList(this.form, this.page)
                .then((res) => {
                    this.list = res.list
                    this.page.total = res.totalCount
                })
                .finally(() => {
                    this.listLoading = false
                })
        },
        // 查询
        handleFilter() {
            this.page.pageNo = 1
            this.getList()
        }
    }
}
</script>

<style lang="scss">
// 在选择月份时，禁止切换年份
.disabled-year .el-date-picker__header {
    pointer-events: none;
}
</style>
